<template>
  <div class="family-management">
    <!-- 成员列表 -->
    <div class="members-grid">
      <div v-for="member in familyMembers" :key="member.id" class="member-card">
        <div class="member-header">
          <div class="member-avatar">
            <img
              :src="getAvatarUrl(member)"
              :alt="member.full_name"
              @error="handleAvatarError"
            />
          </div>
          <div class="member-info">
            <h3 class="member-name">{{ member.full_name }}</h3>
            <p class="member-username">@{{ member.username }}</p>
            <div class="member-badges">
              <span
                v-if="member.role"
                :class="['role-badge', `role-${member.role}`]"
              >
                {{ getRoleLabel(member.role) }}
              </span>
              <span v-if="member.relationship" class="relationship-badge">
                {{ getRelationshipLabel(member.relationship) }}
              </span>
            </div>
          </div>
          <div class="member-actions">
            <button
              @click="editMember(member)"
              class="action-button edit"
              title="编辑"
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path
                  d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
                />
                <path
                  d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
                />
              </svg>
            </button>
            <button
              @click="deleteMember(member)"
              class="action-button delete"
              title="删除"
              :disabled="member.id === currentUserId"
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path
                  d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14zM10 11v6M14 11v6"
                />
              </svg>
            </button>
          </div>
        </div>

        <div class="member-details">
          <div class="detail-item">
            <span class="detail-label">邮箱:</span>
            <span class="detail-value">{{ member.email }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">状态:</span>
            <span
              :class="[
                'status-badge',
                member.is_active ? 'active' : 'inactive',
              ]"
            >
              {{ member.is_active ? "活跃" : "已禁用" }}
            </span>
          </div>
          <div class="detail-item">
            <span class="detail-label">加入时间:</span>
            <span class="detail-value">{{
              formatDate(member.created_at)
            }}</span>
          </div>
        </div>
      </div>

      <!-- 添加成员卡片 -->
      <div class="member-card add-member-card" @click="showAddModal = true">
        <div class="add-member-content">
          <svg
            width="48"
            height="48"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
          <span class="add-member-text">添加成员</span>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="familyMembers.length === 0 && !loading" class="empty-state">
      <svg
        width="64"
        height="64"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1"
      >
        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
        <circle cx="9" cy="7" r="4" />
        <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
      </svg>
      <p>暂无家庭成员</p>
      <button @click="showAddModal = true" class="add-button">
        添加第一个成员
      </button>
    </div>

    <!-- 添加/编辑成员模态框 -->
    <div
      v-if="showAddModal || showEditModal"
      class="modal-overlay"
      @click.self="closeModals"
    >
      <div class="modal glass-effect">
        <div class="modal-header">
          <h3>{{ showAddModal ? "添加家庭成员" : "编辑家庭成员" }}</h3>
          <button @click="closeModals" class="close-button">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="M18 6L6 18M6 6l12 12" />
            </svg>
          </button>
        </div>

        <form @submit.prevent="handleSubmit" class="member-form">
          <div class="form-group">
            <label for="username">用户名 *</label>
            <input
              id="username"
              v-model="formData.username"
              type="text"
              required
              :class="{ error: errors.username }"
            />
            <span v-if="errors.username" class="error-message">{{
              errors.username
            }}</span>
          </div>

          <div class="form-group">
            <label for="email">邮箱 *</label>
            <input
              id="email"
              v-model="formData.email"
              type="email"
              required
              :class="{ error: errors.email }"
            />
            <span v-if="errors.email" class="error-message">{{
              errors.email
            }}</span>
          </div>

          <div class="form-group">
            <label for="full_name">姓名 *</label>
            <input
              id="full_name"
              v-model="formData.full_name"
              type="text"
              required
              :class="{ error: errors.full_name }"
            />
            <span v-if="errors.full_name" class="error-message">{{
              errors.full_name
            }}</span>
          </div>

          <div v-if="showAddModal" class="form-group">
            <label for="password">密码 *</label>
            <input
              id="password"
              v-model="formData.password"
              type="password"
              required
              :class="{ error: errors.password }"
            />
            <span v-if="errors.password" class="error-message">{{
              errors.password
            }}</span>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="role">角色</label>
              <select
                id="role"
                v-model="formData.role"
                placeholder="请选择角色"
                class="form-select"
              >
                <option value="admin">管理员</option>
                <option value="member">成员</option>
                <option value="child">孩子</option>
                <option value="guest">客人</option>
              </select>
            </div>

            <div class="form-group">
              <label for="relationship">关系</label>
              <select
                id="relationship"
                v-model="formData.relationship"
                placeholder="请选择关系"
                class="form-select"
              >
                <option value="father">父亲</option>
                <option value="mother">母亲</option>
                <option value="son">儿子</option>
                <option value="daughter">女儿</option>
                <option value="grandfather">祖父</option>
                <option value="grandmother">祖母</option>
                <option value="other">其他</option>
              </select>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="phone">电话</label>
              <input
                id="phone"
                v-model="formData.phone"
                type="tel"
                placeholder="请输入电话号码"
              />
            </div>

            <div class="form-group">
              <label for="birth_date">生日</label>
              <input
                id="birth_date"
                v-model="formData.birth_date"
                type="date"
              />
            </div>
          </div>

          <div class="form-group">
            <label for="nickname">昵称</label>
            <input
              id="nickname"
              v-model="formData.nickname"
              type="text"
              placeholder="请输入昵称"
            />
          </div>

          <div class="form-actions">
            <button type="button" @click="closeModals" class="cancel-button">
              取消
            </button>
            <button type="submit" class="submit-button" :disabled="loading">
              {{ loading ? "保存中..." : showAddModal ? "添加" : "保存" }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- 删除确认对话框 -->
    <div
      v-if="showDeleteModal"
      class="modal-overlay"
      @click.self="showDeleteModal = false"
    >
      <div class="modal glass-effect delete-modal">
        <div class="modal-header">
          <h3>确认删除</h3>
          <button @click="showDeleteModal = false" class="close-button">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="M18 6L6 18M6 6l12 12" />
            </svg>
          </button>
        </div>

        <div class="delete-content">
          <svg
            width="48"
            height="48"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1"
          >
            <path
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
            />
          </svg>
          <p>
            确定要删除家庭成员
            <strong>{{ memberToDelete?.full_name }}</strong> 吗？
          </p>
          <p class="warning-text">
            此操作不可撤销，该成员的所有数据将被永久删除。
          </p>
        </div>

        <div class="form-actions">
          <button @click="showDeleteModal = false" class="cancel-button">
            取消
          </button>
          <button
            @click="confirmDelete"
            class="delete-button"
            :disabled="loading"
          >
            {{ loading ? "删除中..." : "删除" }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, computed } from "vue";
import { useAuthStore } from "@/stores/auth";
import { familyMemberApi } from "@/services/familyMemberService";
import type {
  FamilyMemberResponse,
  FamilyMemberCreate,
  FamilyMemberUpdate,
} from "@/types/family";

// 定义组件事件
defineEmits<{
  close: [];
}>();

// 认证状态
const authStore = useAuthStore();
const currentUserId = computed(() => authStore.user?.id || 0);

// 响应式状态
const familyMembers = ref<FamilyMemberResponse[]>([]);
const loading = ref(false);
const showAddModal = ref(false);
const showEditModal = ref(false);
const showDeleteModal = ref(false);
const memberToDelete = ref<FamilyMemberResponse | null>(null);

// 表单数据
const formData = reactive<Partial<FamilyMemberCreate & FamilyMemberUpdate>>({
  username: "",
  email: "",
  full_name: "",
  password: "",
  role: undefined,
  relationship: undefined,
  phone: undefined,
  birth_date: undefined,
  nickname: undefined,
});

// 表单错误
const errors = ref<Record<string, string>>({});

// 清除错误
const clearErrors = () => {
  errors.value = {};
};

// 清除表单
const clearForm = () => {
  Object.assign(formData, {
    username: "",
    email: "",
    full_name: "",
    password: "",
    role: undefined,
    relationship: undefined,
    phone: undefined,
    birth_date: undefined,
    nickname: undefined,
  });
  clearErrors();
};

// 获取家庭成员列表
const fetchFamilyMembers = async () => {
  try {
    loading.value = true;
    familyMembers.value = await familyMemberApi.getFamilyMembers();
  } catch (error) {
    console.error("获取家庭成员列表失败:", error);
  } finally {
    loading.value = false;
  }
};

// 获取头像URL
const getAvatarUrl = (member: FamilyMemberResponse): string => {
  // 这里可以根据实际需求返回头像URL
  return `https://ui-avatars.com/api/?name=${encodeURIComponent(member.full_name)}&background=007aff&color=fff&size=64`;
};

// 处理头像加载错误
const handleAvatarError = (event: Event) => {
  const img = event.target as HTMLImageElement;
  img.src = `https://ui-avatars.com/api/?name=U&background=007aff&color=fff&size=64`;
};

// 获取角色标签
const getRoleLabel = (role: string): string => {
  const roleLabels: Record<string, string> = {
    admin: "管理员",
    member: "成员",
    child: "孩子",
    guest: "客人",
  };
  return roleLabels[role] || role;
};

// 获取关系标签
const getRelationshipLabel = (relationship: string): string => {
  const relationshipLabels: Record<string, string> = {
    father: "父亲",
    mother: "母亲",
    son: "儿子",
    daughter: "女儿",
    grandfather: "祖父",
    grandmother: "祖母",
    other: "其他",
  };
  return relationshipLabels[relationship] || relationship;
};

// 格式化日期
const formatDate = (dateString: string): string => {
  return new Date(dateString).toLocaleDateString("zh-CN");
};

// 编辑成员
const editMember = (member: FamilyMemberResponse) => {
  Object.assign(formData, {
    username: member.username,
    email: member.email,
    full_name: member.full_name,
    role: member.role,
    relationship: member.relationship,
    phone: undefined,
    birth_date: undefined,
    nickname: undefined,
  });
  showEditModal.value = true;
};

// 删除成员
const deleteMember = (member: FamilyMemberResponse) => {
  memberToDelete.value = member;
  showDeleteModal.value = true;
};

// 关闭模态框
const closeModals = () => {
  showAddModal.value = false;
  showEditModal.value = false;
  showDeleteModal.value = false;
  memberToDelete.value = null;
  clearForm();
};

// 验证表单
const validateForm = (): boolean => {
  clearErrors();

  if (!formData.username?.trim()) {
    errors.value.username = "用户名不能为空";
    return false;
  }

  if (!formData.email?.trim()) {
    errors.value.email = "邮箱不能为空";
    return false;
  }

  if (!formData.full_name?.trim()) {
    errors.value.full_name = "姓名不能为空";
    return false;
  }

  if (showAddModal.value && !formData.password?.trim()) {
    errors.value.password = "密码不能为空";
    return false;
  }

  return true;
};

// 处理表单提交
const handleSubmit = async () => {
  if (!validateForm()) return;

  try {
    loading.value = true;

    if (showAddModal.value) {
      // 添加成员
      await familyMemberApi.createFamilyMember(formData as FamilyMemberCreate);
    } else {
      // 编辑成员
      await familyMemberApi.updateFamilyMember(
        memberToDelete.value!.id,
        formData as FamilyMemberUpdate,
      );
    }

    // 刷新列表
    await fetchFamilyMembers();
    closeModals();
  } catch (error) {
    console.error("保存家庭成员失败:", error);
  } finally {
    loading.value = false;
  }
};

// 确认删除
const confirmDelete = async () => {
  if (!memberToDelete.value) return;

  try {
    loading.value = true;
    await familyMemberApi.deleteFamilyMember(memberToDelete.value.id);
    await fetchFamilyMembers();
    closeModals();
  } catch (error) {
    console.error("删除家庭成员失败:", error);
  } finally {
    loading.value = false;
  }
};

// 处理键盘事件
const handleKeyDown = (event: KeyboardEvent) => {
  // 如果按下了ESC键且有模态框打开
  if (event.key === "Escape") {
    // 阻止事件冒泡，避免关闭整个应用窗口
    event.stopPropagation();
    event.preventDefault();

    // 关闭最顶层的弹窗
    if (showDeleteModal.value) {
      showDeleteModal.value = false;
      memberToDelete.value = null;
    } else if (showAddModal.value) {
      showAddModal.value = false;
      clearForm();
    } else if (showEditModal.value) {
      showEditModal.value = false;
      clearForm();
    }
  }
};

// 初始化
onMounted(() => {
  fetchFamilyMembers();
  // 添加键盘事件监听器
  document.addEventListener("keydown", handleKeyDown);
});

// 清理事件监听器
onUnmounted(() => {
  document.removeEventListener("keydown", handleKeyDown);
});
</script>

<style lang="scss" scoped>
.family-management {
  padding: 24px;
  width: 100%;
  height: 100%;
  background: var(--el-bg-color-overlay);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  overflow: auto;
}

.management-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.add-button {
  background: var(--el-color-primary);
  color: white;
  border: none;
  border-radius: var(--el-border-radius-small);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;

  &:hover {
    background: var(--el-color-primary-light-3);
    transform: translateY(-1px);
  }
}

.close-button {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: none;
  border-radius: var(--el-border-radius-small);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;

  &:hover {
    background: rgba(239, 68, 68, 0.2);
    transform: translateY(-1px);
  }
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
  width: 100%;
  height: fit-content;
}

.member-card {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  padding: 24px;
  transition: all 0.3s ease;
  height: 100%;
  min-height: 200px;

  &:hover {
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color-light);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
}

.member-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.member-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.member-info {
  flex: 1;
  margin-left: 16px;
}

.member-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0 0 4px 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.member-username {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin: 0 0 8px 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.member-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.role-badge {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--el-border-radius-small);
  font-weight: 500;

  &.role-admin {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
  }

  &.role-member {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
  }

  &.role-child {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
  }

  &.role-guest {
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
  }
}

.relationship-badge {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--el-border-radius-small);
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
  font-weight: 500;
}

.member-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-button {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--el-border-radius-small);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;

  &.edit {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;

    &:hover {
      background: rgba(59, 130, 246, 0.2);
    }
  }

  &.delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;

    &:hover {
      background: rgba(239, 68, 68, 0.2);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}

.member-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.detail-label {
  color: var(--el-text-color-secondary);
  font-weight: 500;
}

.detail-value {
  color: var(--el-text-color-primary);
}

.status-badge {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--el-border-radius-small);
  font-weight: 500;

  &.active {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
  }

  &.inactive {
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
  }
}

.empty-state {
  text-align: center;
  padding: 48px;
  color: var(--el-text-color-secondary);

  svg {
    margin-bottom: 24px;
    opacity: 0.5;
  }

  p {
    margin-bottom: 24px;
    font-size: 18px;
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(5px);
}

.modal {
  background: var(--el-bg-color-overlay);
  backdrop-filter: blur(10px);
  border-radius: var(--el-border-radius-base);
  padding: 24px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    margin: 0;
    font-family:
      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
}

.close-button {
  background: var(--el-bg-color);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--el-text-color-secondary);

  &:hover {
    background: var(--el-bg-color-overlay);
    color: var(--el-text-color-primary);
  }
}

.member-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  color: var(--el-text-color-primary);
  font-size: 14px;
  font-weight: 500;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.form-group input,
.form-group select {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-small);
  color: var(--el-text-color-primary);
  font-size: 14px;
  padding: 8px 16px;
  outline: none;
  transition: all 0.3s ease;

  &:focus {
    border-color: var(--el-color-primary);
    box-shadow: 0 0 0 3px rgba(var(--el-color-primary-rgb), 0.1);
  }

  &::placeholder {
    color: var(--el-text-color-placeholder);
  }

  &.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
  }
}

.form-select {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-small);
  color: var(--el-text-color-primary);
  font-size: 14px;
  padding: 8px 16px;
  outline: none;
  transition: all 0.3s ease;
  cursor: pointer;

  &:focus {
    border-color: var(--el-color-primary);
    box-shadow: 0 0 0 3px rgba(var(--el-color-primary-rgb), 0.1);
  }

  &::placeholder {
    color: var(--el-text-color-placeholder);
  }
}

.error-message {
  color: #ef4444;
  font-size: 12px;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.cancel-button {
  background: var(--el-bg-color);
  color: var(--el-text-color-secondary);
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-small);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color-light);
    color: var(--el-text-color-primary);
  }
}

.submit-button {
  background: var(--el-color-primary);
  color: white;
  border: none;
  border-radius: var(--el-border-radius-small);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover:not(:disabled) {
    background: var(--el-color-primary-light-3);
    transform: translateY(-1px);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

.delete-modal {
  max-width: 400px;
}

.delete-content {
  text-align: center;
  padding: 24px 0;

  svg {
    color: var(--el-color-warning);
    margin-bottom: 16px;
  }

  p {
    color: var(--el-text-color-primary);
    margin-bottom: 4px;
    font-family:
      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  .warning-text {
    color: var(--el-color-danger);
    font-size: 14px;
  }
}

.delete-button {
  background: var(--el-color-danger);
  color: white;
  border: none;
  border-radius: var(--el-border-radius-small);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover:not(:disabled) {
    background: #dc2626;
    transform: translateY(-1px);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

@media (max-width: 768px) {
  .family-management {
    padding: 16px;
  }

  .members-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .modal {
    padding: 16px;
    margin: 16px;
    width: calc(100% - 32px);
  }
}

.add-member-card {
  cursor: pointer;
  border: 2px dashed var(--el-border-color);
  background: var(--el-bg-color);
  transition: all 0.3s ease;

  &:hover {
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color-light);
    transform: translateY(-2px);
  }
}

.add-member-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  min-height: 200px;
  color: var(--el-text-color-secondary);

  svg {
    margin-bottom: 16px;
    opacity: 0.7;
  }

  &:hover {
    color: var(--el-text-color-primary);

    svg {
      opacity: 1;
    }
  }
}

.add-member-text {
  font-size: 18px;
  font-weight: 500;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
</style>
